React Suspense 与 Error Boundary 组合：深入探讨嵌套错误处理

            
// HeavyChartComponent.js
const HeavyChartComponent = () => {
  // ... complex charting logic
  return <div>My Detailed Chart</div>;
};
export default HeavyChartComponent;

// App.js
import React, { Suspense } from 'react';

const HeavyChartComponent = React.lazy(() => import('./HeavyChartComponent'));

function App() {
  return (
    <div>
      <h1>My Dashboard</h1>
      <Suspense fallback={<p>Loading chart...</p>}>
        <HeavyChartComponent />
      </Suspense>
    </div>
  );
}

            

              
                Copy
              
            
          

            
import React from 'react';

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Uncaught error:", error, errorInfo);
    // logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

// Usage:
// <MyErrorBoundary>
//   <SomeComponentThatMightThrow />
// </MyErrorBoundary>

            

              
                Copy
              
            
          

            
<MyErrorBoundary>
  <Suspense fallback={<p>Loading...</p>}>
    <DataFetchingComponent />
  </Suspense>
</MyErrorBoundary>

            

              
                Copy
              
            
          

            
<!-- Anti-Pattern: Do not do this! -->
<Suspense fallback={<p>Loading...</p>}>
  <MyErrorBoundary>
    <DataFetchingComponent />
  </MyErrorBoundary>
</Suspense>

            

              
                Copy
              
            
          

            
function DashboardPage() {
  return (
    <MyErrorBoundary>
      <Suspense fallback={<DashboardSkeleton />}>
        <div className="dashboard-layout">
          <HeaderNotifications />
          <MainContentSales />
          <SidebarProfile />
        </div>
      </Suspense>
    </MyErrorBoundary>
  );
}

            

              
                Copy
              
            
          

            
// --- api.js (A simple data fetching wrapper for Suspense) ---
function wrapPromise(promise) {
  let status = 'pending';
  let result;
  let suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );
  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      } else if (status === 'success') {
        return result;
      }
    },
  };
}

export function fetchNotifications() {
  console.log('Fetching notifications...');
  return new Promise((resolve) => setTimeout(() => resolve(['New message', 'System update']), 2000));
}

export function fetchSalesData() {
  console.log('Fetching sales data...');
  return new Promise((resolve, reject) => setTimeout(() => reject(new Error('Failed to load sales data')), 3000));
}

export function fetchUserProfile() {
  console.log('Fetching user profile...');
  return new Promise((resolve) => setTimeout(() => resolve({ name: 'Jane Doe', level: 'Admin' }), 1500));
}

// --- Generic components for fallbacks ---
const LoadingSpinner = () => <p>Loading...</p>;
const ErrorMessage = ({ message }) => <p style={{color: 'red'}}>Error: {message}</p>;

            

              
                Copy
              
            
          

            
// --- Dashboard Components ---
import { fetchNotifications, fetchSalesData, fetchUserProfile, wrapPromise } from './api';

const notificationsResource = wrapPromise(fetchNotifications());
const salesResource = wrapPromise(fetchSalesData());
const profileResource = wrapPromise(fetchUserProfile());

const HeaderNotifications = () => {
  const notifications = notificationsResource.read();
  return <header>Notifications ({notifications.length})</header>;
};

const MainContentSales = () => {
  const salesData = salesResource.read(); // This will throw the error
  return <main>{/* Render sales charts */}</main>;
};

const SidebarProfile = () => {
  const profile = profileResource.read();
  return <aside>Welcome, {profile.name}</aside>;
};

            

              
                Copy
              
            
          

            
import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary'; // Our class component from before

function DashboardPage() {
  return (
    <div className="dashboard-layout">
      <MyErrorBoundary fallback={<header>Could not load notifications.</header>}>
        <Suspense fallback={<header>Loading notifications...</header>}>
          <HeaderNotifications />
        </Suspense>
      </MyErrorBoundary>

      <MyErrorBoundary fallback={<main><p>Sales data is currently unavailable.</p></main>}>
        <Suspense fallback={<main><p>Loading sales charts...</p></main>}>
          <MainContentSales />
        </Suspense>
      </MyErrorBoundary>

      <MyErrorBoundary fallback={<aside>Could not load profile.</aside>}>
        <Suspense fallback={<aside>Loading profile...</aside>}>
          <SidebarProfile />
        </Suspense>
      </MyErrorBoundary>
    <div>
  );
}

            

              
                Copy
              
            
          

            
// First, install the library:
// npm install react-error-boundary

import { ErrorBoundary } from 'react-error-boundary';

// A reusable error fallback component with a retry button
function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

// In our DashboardPage component, we can use it like this:
function DashboardPage() {
  return (
    <div className="dashboard-layout">
      {/* ... other components ... */}

      <ErrorBoundary
        FallbackComponent={ErrorFallback}
        onReset={() => {
          // reset the state of your query client here
          // for example, with React Query: queryClient.resetQueries('sales-data')
          console.log('Attempting to refetch sales data...');
        }}
      >
        <Suspense fallback={<main><p>Loading sales charts...</p></main>}>
          <MainContentSales />
        </Suspense>
      </ErrorBoundary>

      {/* ... other components ... */}
    <div>
  );
}

            

              
                Copy
              
            
          

            
const SalesChartSkeleton = () => (
  <div className="skeleton-wrapper">
    <div className="skeleton-title"></div>
    <div className="skeleton-chart-area"></div>
  </div>
);

// Usage:
<Suspense fallback={<SalesChartSkeleton />}>
  <MainContentSales />
</Suspense>

            

              
                Copy